<script setup lang="ts">
import myAuth from "@/composables/myAuth.ts";
const {form,repassword} = myAuth();
const router = useRouter();
const onSubmit = async ()=>{
  await repassword(form);
  await router.push({name:'login'})
}

</script>

<template>
  <main class="all">
    <div class="main">
      <div class="image">
        <img src="/images/repassword.jpg" alt="login" />
      </div>
      <div class="form">
        <h3>重置密码</h3>
        <div class="inputs">
          <div class="account">
            <form-input  type="text" placeholder="请输入手机号" v-model="form.phone" v-clearError="'phone'"/>
            <my-error name="phone"/>
            <form-input class="input mt-4" type="password" placeholder="请输入新密码" v-model="form.password" v-clearError="'password'"/>
            <my-error name="password"/>
            <form-input class="input mt-4" type="password" placeholder="确认密码" v-model="form.password_confirmation" v-clearError="'password_confirmation'"/>
            <my-error name="password_confirmation"/>
          </div>
          <my-code v-model:code="form.code" :phone="form.phone" :type="'repassword'"/>
          <form-button @click="onSubmit"><icon-setting-three/>确认</form-button>
         <layout-auth-footer />
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
main.all{
  @apply h-screen bg-slate-300 flex justify-center items-center;
  div.main{
    @apply bg-white w-[720px] grid grid-cols-2 rounded overflow-hidden shadow;
    div.image{
      @apply relative;
      img{
        @apply absolute w-[360px] h-full object-cover;
      }
    }
    div.form{
      @apply p-6;
      h3{
        @apply text-gray-700 font-bold text-center;
      }
      div.inputs{
        @apply flex flex-col mt-4;
        div.account{
          @apply p-4 border border-slate-400 rounded;
        }
        div.code{
          @apply flex gap-2 items-center mt-4;
        }
        div.error{
          @apply bg-red-300 p-1 text-white mt-1 text-xs flex items-center gap-1;

        }
      }
    }
  }
}
</style>